<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - 项目管理系统</title>
    <!-- 引入Google字体 - Noto Sans SC -->
    <link href="https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link rel="stylesheet" href="/static/dist.css">
    <!-- Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    
<style>
    /* 隐藏侧边栏 */
    aside {
        display: none !important;
    }
    
    /* 调整主内容区域边距 */
    div.ml-56 {
        margin-left: 0 !important;
        width: 100%;
    }
    
    /* 调整主内容区域 */
    .ml-\[250px\] {
        margin-left: 0 !important;
    }
    
    /* 隐藏顶部导航栏的用户菜单和消息中心 */
    .relative.group, .relative:nth-child(1) {
        display: none !important;
    }
    
    /* 隐藏顶部导航栏标题 */
    header div:first-child {
        display: none !important;
    }
    
    /* 隐藏顶部导航栏 */
    header {
        display: none !important;
    }
    
    /* 自定义登录页面样式 */
    .login-container {
        background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    .login-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        width: 100%;
        max-width: 420px;
        overflow: hidden;
    }
    
    .login-header {
        background: #165DFF;
        padding: 30px 20px;
        text-align: center;
    }
    
    .login-form {
        padding: 30px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-control {
        border: 1px solid #e1e4e8;
        border-radius: 8px;
        padding: 12px 15px;
        font-size: 16px;
        transition: all 0.3s;
        width: 100%;
    }
    
    .form-control:focus {
        border-color: #165DFF;
        box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        outline: none;
    }
    
    .input-group {
        position: relative;
    }
    
    .input-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #6B7280;
    }
    
    .input-with-icon {
        padding-left: 45px;
    }
    
    .btn-login {
        background: #165DFF;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .btn-login:hover {
        background: #0D47CC;
    }
    
    .alert {
        border-radius: 8px;
        padding: 12px 15px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    
    .alert-success {
        background-color: #F0FDF4;
        color: #166534;
        border: 1px solid #BBF7D0;
    }
    
    .alert-error {
        background-color: #FEF2F2;
        color: #B91C1C;
        border: 1px solid #FECACA;
    }
</style>

    <!-- 引入项目特定样式 -->
    <link rel="stylesheet" href="/static/project.css">
    <style>
        /* 防止页面宽度扩展 */
        body {
            overflow-x: hidden;
        }
        .ml-\[250px\] {
            overflow-x: hidden;
        }
        header {
            overflow-x: hidden;
        }
        main {
            overflow-x: hidden;
        }
        /* 限制用户信息区域宽度 */
        header .flex {
            max-width: 100%;
        }
        header .flex > div:first-child {
            flex-shrink: 0;
            margin-right: 20px;
        }
        header .flex > div:last-child {
            flex-shrink: 0;
        }
        
        /* 用户下拉菜单样式 */
        .user-dropdown {
            position: fixed;
            z-index: 9999;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <div class="flex">
        <!-- 侧边栏导航 -->
        <aside class="fixed inset-y-0 left-0 w-[250px] bg-gray-900 text-white shadow-lg z-20 transition-sidebar">
            <!-- 系统标题/Logo区域 -->
            <div class="flex items-center p-4 border-b border-gray-800">
                <i class="fas fa-tasks text-xl text-primary mr-2"></i>
                <span class="font-bold text-xl">项目管理系统</span>
            </div>
            
            <!-- 主导航菜单 -->
            <nav class="py-4">
                <ul class="space-y-1">
                    <li>
                    <a href="/home" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white ">
                        <i class="fas fa-home w-5 text-center mr-2"></i>
                        <span class="font-medium">首页</span>
                    </a>
                </li>
                    <!-- 项目管理菜单 -->
                    <li>
                        <div class="project-menu">
                            <a href="#" class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white " onclick="toggleMenu('project-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-folder-open w-5 text-center mr-2"></i>
                                    <span class="font-medium">项目管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform " id="project-submenu-icon"></i>
                            </a>
                            <ul id="project-submenu" class="pl-8 mt-1 space-y-1 hidden">
                                <li>
                                    <a href="/dashboard" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                                        <i class="fas fa-chart-bar w-5 text-center mr-2"></i>
                                        <span>项目看板</span>
                                    </a>
                                </li>
                                <li>
                                      <a href="/projects" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                                          <i class="fas fa-list w-5 text-center mr-2"></i>
                                          <span>项目列表</span>
                                      </a>
                                  </li>
                                  <li>
                                      <a href="/progress/tracking" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                                          <i class="fas fa-tasks w-5 text-center mr-2"></i>
                                          <span>进度跟踪</span>
                                      </a>
                                  </li>
                                <li>
                                    <a href="/gantt/chart" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                                        <i class="fas fa-chart-gantt w-5 text-center mr-2"></i>
                                        <span>甘特图</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="/work/hour/stats" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                                        <i class="fas fa-clock w-5 text-center mr-2"></i>
                                        <span>工时统计</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!-- 客户管理菜单 -->
                    <li>
                        <div class="customer-menu">
                            <a href="#" class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white " onclick="toggleMenu('customer-submenu')">
                                <div class="flex items-center">
                                    <i class="fas fa-users w-5 text-center mr-2"></i>
                                    <span class="font-medium">客户管理</span>
                                </div>
                                <i class="fas fa-chevron-down text-xs transition-transform " id="customer-submenu-icon"></i>
                            </a>
                            <ul id="customer-submenu" class="pl-8 mt-1 space-y-1 hidden">
            <li>
                  <a href="/customers" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                      <i class="fas fa-user-friends w-5 text-center mr-2"></i>
                      <span>客户列表</span>
                  </a>
              </li>
              <li>
                  <a href="/leads" class="flex items-center px-3 py-2 text-sm rounded-md text-gray-400 hover:bg-gray-800 hover:text-white ">
                      <i class="fas fa-lightbulb w-5 text-center mr-2"></i>
                      <span>销售线索</span>
                  </a>
              </li>
        </ul>
                        </div>
                    </li>
                </ul>
            </nav>
            
            <!-- 底部版权信息 -->
            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-800">
                <p class="text-xs text-gray-500 text-center">© 2025 项目管理系统 版权所有</p>
            </div>
        </aside>

        <!-- 主要内容区域 -->
        <div class="ml-[250px] flex-1">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow-sm">
                <div class="flex justify-between items-center px-6 py-2">
                    <!-- 标题区域 -->
                    <div>
                        <h1 class="text-xl font-bold text-gray-800"></h1>
                        <p class="text-sm text-gray-500 mt-1"></p>
                    </div>
                   
                    <!-- 右侧功能区 -->
                    <div class="flex items-center space-x-4">
                        <!-- 通知图标 -->
                        <div class="relative">
                            <button class="p-2 text-gray-500 hover:text-gray-600">
                                <i class="fas fa-bell"></i>
                                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">3</span>
                            </button>
                        </div>
                       
                        <!-- 用户信息 -->
                        
                        
                        <!-- 用户下拉菜单 - 移动到body层级 -->
                        
                    </div>
                </div>
            </header>

            <!-- 主体内容 -->
            <main class="p-4 bg-gray-50 h-[calc(100vh-56px)] overflow-auto">
                
<div class="login-container">
    <div class="login-card">
        <!-- 登录头部 -->
        <div class="login-header">
            <h2 class="text-2xl font-bold text-white mb-1">项目管理系统</h2>
            <p class="text-white/80">普祐科技</p>
        </div>
        
        <!-- 登录表单 -->
        <div class="login-form">
            <!-- 消息提示 -->
            
                
                    
                        <div class="alert alert-error">
                            请先登录
                        </div>
                    
                
            
            
            <form method="POST">
                <!-- 用户名输入 -->
                <div class="form-group">
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="input-group">
                        <i class="fas fa-user input-icon"></i>
                        <input type="text" 
                               id="username" 
                               name="username" 
                               required 
                               placeholder="请输入用户名" 
                               class="form-control input-with-icon"
                               value="admin"
                        />
                    </div>
                </div>
                
                <!-- 密码输入 -->
                <div class="form-group">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="input-group">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password" 
                               id="password" 
                               name="password" 
                               required 
                               placeholder="请输入密码" 
                               class="form-control input-with-icon"
                               value="admin123"
                        />
                    </div>
                </div>
                
                <!-- 登录按钮 -->
                <div class="form-group">
                    <button type="submit" class="btn-login">
                        登录
                    </button>
                </div>
            </form>
        </div>
        
        <!-- 页脚 -->
        <div class="px-6 py-4 bg-gray-50 text-center border-t border-gray-100">
            <small class="text-gray-500">© 2025 普祐科技. 保留所有权利.</small>
        </div>
    </div>
</div>

            </main>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    
    <script>
        // 切换菜单展开/折叠
        function toggleMenu(menuId) {
    const submenu = document.getElementById(menuId);
    const icon = document.getElementById(menuId + '-icon');
    
    // 获取所有子菜单
    const allSubmenus = document.querySelectorAll('[id$="-submenu"]');
    const allIcons = document.querySelectorAll('[id$="-submenu-icon"]');
    
    if (submenu.classList.contains('hidden')) {
        // 展开菜单
        // 先折叠所有其他菜单
        allSubmenus.forEach(menu => {
            if (menu.id !== menuId) {
                menu.classList.add('hidden');
            }
        });
        
        // 重置所有其他菜单的图标
        allIcons.forEach(submenuIcon => {
            if (submenuIcon.id !== menuId + '-icon') {
                submenuIcon.classList.remove('rotate-180');
            }
        });
        
        // 展开当前菜单
        submenu.classList.remove('hidden');
        icon.classList.add('rotate-180');
    } else {
        // 折叠菜单
        submenu.classList.add('hidden');
        icon.classList.remove('rotate-180');
    }
}
        
        // 用户下拉菜单
        (function() {
            // 等待DOM完全加载
            function initUserDropdown() {
                const userMenuButton = document.querySelector('.user-menu-button');
                const userDropdown = document.querySelector('.user-dropdown');
                
                if (userMenuButton && userDropdown) {
                    // 移除之前的事件监听器（如果有）
                    userMenuButton.removeEventListener('click', handleUserMenuClick);
                    document.removeEventListener('click', handleDocumentClick);
                    userDropdown.removeEventListener('click', handleDropdownClick);
                    
                    // 添加新的事件监听器
                    userMenuButton.addEventListener('click', handleUserMenuClick);
                    document.addEventListener('click', handleDocumentClick);
                    userDropdown.addEventListener('click', handleDropdownClick);
                }
            }
            
            // 处理用户菜单按钮点击事件
            function handleUserMenuClick(e) {
                e.preventDefault();
                e.stopPropagation();
                const userDropdown = document.querySelector('.user-dropdown');
                if (userDropdown) {
                    // 计算下拉菜单位置
                    const buttonRect = e.currentTarget.getBoundingClientRect();
                    userDropdown.style.top = (buttonRect.bottom + 5) + 'px';
                    userDropdown.style.right = (window.innerWidth - buttonRect.right - 24) + 'px';
                    userDropdown.classList.toggle('hidden');
                }
            }
            
            // 处理文档点击事件
            function handleDocumentClick() {
                const userDropdown = document.querySelector('.user-dropdown');
                if (userDropdown && !userDropdown.classList.contains('hidden')) {
                    userDropdown.classList.add('hidden');
                }
            }
            
            // 处理下拉菜单点击事件
            function handleDropdownClick(e) {
                e.stopPropagation();
            }
            
            // 初始化
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initUserDropdown);
            } else {
                // DOM已经加载完成，直接初始化
                initUserDropdown();
            }
        })();
    </script>

</body>
</html>